<!--
 * @Author: zhi1hw hanwei@zhi1tech.com
 * @Date: 2024-07-06 13:51:13
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2024-07-13 11:39:31
 * @FilePath: \code\src\views\common\soundRecording.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="voice-input" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
    <div >
      {{ state.isSoundRecording ? props.stateSound?language.messageEN.send:language.messageZH.send : props.stateSound?language.messageEN.talk:language.messageZH.talk }}
    </div>
    <span>
      <img
        class="other-yuyin"
        v-if="!state.isDisabled"
        src="@/assets/images/keyboard-icon.png"
        alt=""
        @click="closeVoiceButton"
      />
    </span>
  </div>
  <van-popup
    v-model:show="state.showBottom"
    round
    position="bottom"
    class="modal-class"
    safe-area-inset-bottom
    :style="{ height: '30%' }"
    @close="closeVoice"
  >
    <div class="sound-recording">
      <div class="sound-recording-box">
        <p>{{props.stateSound?language.messageEN.listen:language.messageZH.listen}}</p>
        <p> {{state.isSoundRecording ? props.stateSound?language.messageEN.release:language.messageZH.release : props.stateSound?language.messageEN.swipe:language.messageZH.swipe}} </p>
      </div>
      <div
        class="loaderbg loader"
        :class="!state.blackBoxSpeak ? 'loaderbg1' : ''"
        ref="loaderRef"
      >
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <!-- <van-popup
      v-model:show="state.blackBoxSpeak"
      :style="{ padding: '64px' }"
      v-if="state.btRecoding"
      catchtouchmove="ture"
      >手指上划取消录制</van-popup
    > -->
      <!-- <van-popup
        v-model:show="state.isSoundRecording"
        :style="{ padding: '64px' }"
        >松开手指，取消录制</van-popup
      > -->
    </div>
  </van-popup>
</template>
  <script setup lang="ts">
import {
  ComponentInternalInstance,
  getCurrentInstance,
  inject,
  onMounted,
  onUnmounted,
  reactive,
  watch,
  defineProps,
  provide,
  ref,
} from "vue";
import { prop } from "vue-class-component";
import language from "@/lang/zh";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(["addVoiceItem", "bindChangeKeyword"]);
const themeColor: any = inject("themeColor");
const show = ref(false);
const state = reactive({
  loop: "",
  btRecoding: false,
  blackBoxSpeak: true,
  startY: 0,
  timeOutEvent: 0,
  isSoundRecording: false,
  showBottom: false,
});
const props = defineProps({
  stateSound:{
    type: Boolean,
    default: "",
  },
});

const loaderRef = ref(null);
const closeVoiceButton = () => {
  emits('bindChangeKeyword')
  wx.stopRecord()
}
const closeVoice = () => {
  wx.stopRecord()
}
// 手指开始触发
const touchstart = (e: any) => {
  state.startY = e.targetTouches[0].clientY;
  state.timeOutEvent = 0;
  // 长按1000毫秒后执行
  state.timeOutEvent = setTimeout(() => {
    console.log(456)
    wx.ready(function () {
      wx.checkJsApi({
          jsApiList: [
          'translateVoice',
          'stopRecord',
          'startRecord'
          ],
          success: function(res) {
            if(!res.checkResult.translateVoice || !res.checkResult.stopRecord || !res.checkResult.startRecord) {
              proxy?.$showToast("语音功能仅支持在企业微信中使用，需要使用此功能请前往企业微信 -> 工作台 -> 至一AI助手中打开应用");
            } else {
              state.showBottom = true;
              startRecord();
            }
          }
      });
 
  });
  }, 500);
  return false;
};
// 长按超过1000毫秒
const startRecord = () => {
  // 调用录音方法
  state.isSoundRecording = true;
  wx.startRecord();
};
// 短按
const startRecordClick = () => {
  // 长按没有超过1000毫秒
};
// 手指离开屏幕触发
const touchend = () => {
  clearTimeout(state.timeOutEvent);
  if (state.timeOutEvent == 0) {
    state.btRecoding = true;
    startRecordClick();
  } else {
    state.btRecoding = false;
    state.isSoundRecording = false;
    stopRecord();
    // 长按结束调用保存录音或者其实事件
  }
};
// 滑动触发
const touchmove = (e: any) => {
  const endY = e.targetTouches[0].clientY;
  if (state.startY - 30 < endY) {
    state.blackBoxSpeak = true;
  } else {
    state.blackBoxSpeak = false;
  }
};

const stopRecord = () => {
  wx.stopRecord({
    success: function (res: any) {
      var localId = res.localId;
      state.showBottom = false;
      if (state.blackBoxSpeak) {
        addVoiceItems(localId);
      } else {
        state.blackBoxSpeak = true;
      }

      // wx.uploadVoice({
      //   localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
      //   isShowProgressTips: 1, // 默认为1，显示进度提示
      //   success: function (res1: any) {
      //     console.log(res1, "uploadVoice");
      //     let obj = {
      //       text: "",
      //       type: 1,
      //       itemType: "voice",
      //       voticeServerId: res1.serverId,
      //     };
      //     emits("addVoiceItem", obj);
      //   },
      //   fail: function (res: any) {
      //     console.log(res, "uploadVoice fail");
      //   },
      // });
    },
  });

  state.isSoundRecording = false;
};
// 通知父元素插入问答数据
const addVoiceItems = (id: any) => {
  wx.translateVoice({
    localId: id,
    isShowProgressTips: 1,
    success: function (res: any) {
      let obj = {
        text: res.translateResult,
        type: 0,
        itemType: "voice",
      };
      emits("addVoiceItem", obj);
      emits('bindChangeKeyword')
    },
  });
};

///audioASR?sid=3sh9I84Pq2zosYY9QzjQfrmaBLaER_E8_2LnuZpiNqBSePksAaAXeIxycOk4P9ybh 阿里语音识别接口
// /getSessionQAList?sessionId=8EC36CCB-4E18-4A54-881B-B2CD00743E17 获取会话问答数据接口
onMounted(() => {
 
});
</script>
  
<style lang="scss" scoped>
.area-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: v-bind("themeColor.textColorLighten");
  font-size: 24px;
  img {
    width: 86px;
    margin-bottom: 10px;
    border: 1px dashed v-bind("themeColor.borderColorLighten");
    pointer-events: none;
  }
}
.voice-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  div {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 44.8px;
    color: rgba(40, 51, 74, 1);
    text-align: left;
    vertical-align: top;
    margin: 0 auto;
  }
  img {
    display: flex;
    width: 60px;
  }
}
.sound-recording-box {
  p {
    display: block;
    text-align: center;
  }
  & > p:first-child {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 44.8px;
    color: rgba(40, 51, 74, 1);
    text-align: center;
    vertical-align: top;
    margin: 68px 0 48px 0;
  }
  & > p:last-child {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 58px;
    color: rgba(148, 162, 176, 1);
    text-align: center;
    vertical-align: top;
  }
}
.modal-class {
  padding: 0 30px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .loader,
  .loaderbg {
    margin: auto;
    width: calc(100% - 60px);
    height: 96px;
    display: flex;
    justify-content: center;
    opacity: 1;
    border-radius: 10px;
    background: rgba(92, 178, 255, 0.1);
    align-items: center;
    position: absolute;
    bottom: 100px;
  }
  
  .loader span,
  .loaderbg span {
    display: block;
    background: rgba(92, 178, 255, 1);
    width: 7px;
    height: 10%;
    border-radius: 14px;
    margin-right: 14px;
    float: left;
    margin-top: 0;
  }
  .loaderbg1 {
    background: rgba(237, 28, 36, 0.1);
    span{
      background: rgba(237, 28, 36, 1);
    }
  }
  .loader span:last-child {
    margin-right: 0px;
  }
  .loader span:nth-child(1) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.4s infinite linear;
  }
  .loader span:nth-child(2) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.2s infinite linear;
  }
  .loader span:nth-child(3) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1s infinite linear;
  }
  .loader span:nth-child(4) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.8s infinite linear;
  }
  .loader span:nth-child(5) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.6s infinite linear;
  }
  .loader span:nth-child(6) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.4s infinite linear;
  }
  .loader span:nth-child(7) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.2s infinite linear;
  }
  .loader span:nth-child(8) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0s infinite linear;
  }
  .loader span:nth-child(9) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.2s infinite linear;
  }
  .loader span:nth-child(10) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.4s infinite linear;
  }
  .loader span:nth-child(11) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.6s infinite linear;
  }
  .loader span:nth-child(12) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.8s infinite linear;
  }
  .loader span:nth-child(13) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1s infinite linear;
  }
  .loader span:nth-child(14) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.2s infinite linear;
  }
  .loader span:nth-child(15) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.4s infinite linear;
  }
  .loader span:nth-child(16) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.4s infinite linear;
  }
  .loader span:nth-child(17) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.2s infinite linear;
  }
  .loader span:nth-child(18) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1s infinite linear;
  }
  .loader span:nth-child(19) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.8s infinite linear;
  }
  .loader span:nth-child(20) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.6s infinite linear;
  }
  .loader span:nth-child(21) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.4s infinite linear;
  }
  .loader span:nth-child(22) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.2s infinite linear;
  }
  .loader span:nth-child(23) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0s infinite linear;
  }
  .loader span:nth-child(24) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.2s infinite linear;
  }
  .loader span:nth-child(25) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.4s infinite linear;
  }
  .loader span:nth-child(26) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.6s infinite linear;
  }
  .loader span:nth-child(27) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 0.8s infinite linear;
  }
  .loader span:nth-child(28) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1s infinite linear;
  }
  .loader span:nth-child(29) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.2s infinite linear;
  }
  .loader span:nth-child(30) {
    --her: 10%;
    --her1: 15%;
    animation: load 2s 1.4s infinite linear;
  }
  @keyframes load {
    0% {
      height: var(--her);
    }
 
    100% {
      height: var(--her1);
    }
  }
}
</style>